<template>
  <div>
    <Search
      style="margin-bottom:10px;text-align:center"
      @search="search"
      v-model="searchWord"
      showSearchButton
      placeholder="搜索邮件"
      triggerType="enter"
      :width="600"
      block
    ></Search>
    <Table
      :datas="list"
      :stripe="stripe"
      :height="550"
      border
      :loading="loading"
    >
      <TableItem title="ID" sort="auto" align="center" prop="id"></TableItem>
      <TableItem title="姓名" align="center" prop="message_name"> </TableItem>
      <TableItem title="电话" align="center" prop="message_phone"> </TableItem>
      <TableItem title="城市" align="center" prop="message_city"> </TableItem>
      <TableItem title="邮件内容" align="center">
        <template slot-scope="{ data }">
          <div class="text-ellipsis" v-width="150">
            {{ data.message_content }}
          </div>
        </template></TableItem
      >
      <TableItem title="URL地址" align="center">
        <template slot-scope="{ data }">
          <div class="text-ellipsis" v-width="150">
            {{ data.message_url }}
          </div>
        </template></TableItem
      >
      <TableItem
        title="来源IP"
        sort="auto"
        align="center"
        prop="message_ip"
      ></TableItem>
      <TableItem
        title="邮件日期"
        sort="auto"
        align="center"
        prop="create_time"
      ></TableItem>
      <TableItem title="操作" align="center" :width="80" fixed="right">
        <template slot-scope="{ data }">
          <i
            v-tooltip
            placement="right"
            content="查看"
            class=" iconfont icon-Group- h-btn h-btn-s h-btn-green"
            @click="open(data)"
          ></i>
          <i
            v-tooltip
            placement="right"
            content="删除"
            class="h-icon-trash h-btn h-btn-s h-btn-red"
            @click="del(data.id)"
          ></i>
        </template>
      </TableItem>
      <div slot="empty">暂时无数据</div>
    </Table>
    <Pagination
      style=" margin-top:20px"
      v-model="pagination"
      align="center"
      @change="currentChange"
      small
    ></Pagination>
    <Modal v-model="messsageDialog" hasDivider hasCloseIcon>
      <div slot="header">邮件内容</div>
      <div :style="{ height: height ? '800px' : 'auto' }">
        <div class="content ">
          <p><span>姓名: </span>{{ data.message_name }}</p>
          <p><span>手机号: </span>{{ data.message_phone }}</p>
          <p><span>地区: </span>{{ data.message_city }}</p>
          <p><span>咨询时间: </span>{{ data.create_time }}</p>
          <p><span>咨询详情: </span>{{ data.message_content }}</p>
        </div>
      </div>
      <div slot="footer">
        <button class="h-btn" @click="clone()">复制电话</button>
      </div>
    </Modal>
  </div>
</template>
<style  lang="less" scoped>
</style>
<script>
export default {
  name: "alertList",
  data() {
    return {
      height: "",
      data: {},
      messsageDialog: false,
      list: [],
      stripe: true,
      isLoading: false,
      loading: true,
      searchWord: "",
      pagination: {
        page: 1,
        size: 10,
        total: 0
      }
    };
  },
  methods: {
    search() {
      this.getMessageList();
    },
    currentChange() {},
    open(data) {
      this.messsageDialog = true;
      this.data = data;
    },
    clone() {
      // console.log(this.data);
      this.$Clipboard({
        text: this.data.message_phone,
        showSuccessTip: "复制成功"
      });
    },
    del(id) {
      this.$Confirm("彻底删除?")
        .then(async () => {
          let res = await this.$post("/api/message/delete", {
            id: id
          });
          console.log(res, id);
          if (res && res.code === 200) {
            this.$Message.success("删除成功");
            this.getMessageList();
          } else {
            this.$Message.error("删除失败");
          }
        })
        .catch(() => {});
    },
    async getMessageList() {
      let res = await this.$get("/api/message/list", {
        limit: this.pagination.size,
        page: this.pagination.page,
        searchWord: this.searchWord
      });
      if (res && res.code === 200) {
        this.loading = false;
        this.list = res.data.list;
        this.pagination.total = res.data.count;
      } else {
        this.$Message.error("获取失败,请刷新重试");
        this.loading = true;
      }
    }
  },
  mounted() {
    this.getMessageList();
  }
};
</script>
<style lang='less' scoped>
.content {
  margin: 0 auto;
  p {
    padding: 10px;
    width: 330px;
    max-height: 200px;
    color: #379469;
    background: #c7eada;
    border-color: #c7eada;
    span {
      font-size: 14px;
      display: inline-block;
      width: 90px;
      color: #333f;
    }
  }
}
</style>